<template>
    <el-row>
        <el-tree-select
            v-model="selectValue"
            placeholder="请选择目标"
            @change="handleChange"
            ref="treeSelectRef"
            node-key="id"
            style="width: 400px"
            clearable
            check-strictly
            @clear="onClear"
            :props="{
                label: 'name',
                // isLeaf: (data) => data.type == 'target',
                // disabled: (data) => data.type !== 'target',
            }"
            :data="treeData">
            <template #prefix>
                <!-- {{ data.name }} -->
                {{ currentNode?.parent_name || '' }}
            </template>
            <template #default="{ data: { name, type, icon } }">
                <span v-if="type == 'catalog'">
                    <n-space>
                        <!-- <n-icon>
                            <ActionIcon.Grid></ActionIcon.Grid>
                        </n-icon> -->
                        <TreeIcon
                            :size="16"
                            :url="icon"
                            color="#fff"></TreeIcon>
                        {{ name }}
                    </n-space>
                </span>
                <span v-if="type == 'target'">
                    <n-space>
                        <!-- <n-icon color="rgb(248, 223, 114)">
                            <ActionIcon.Crosshairs />
                        </n-icon> -->
                        <TreeIcon
                            :size="16"
                            :url="icon"
                            color="rgb(248, 223, 114)"></TreeIcon>
                        {{ name }}
                    </n-space>
                </span>
            </template>
        </el-tree-select>
    </el-row>
</template>

<script setup lang="ts">
import { apiList } from '@/api/apiList'
import { ActionIcon } from '@/common/ActionIconList'
import { useCompRef } from '@/hooks'
import { ICatalog, ICatalogTree } from '@/types/keyobject'
import { isOK } from '@/utils/resUtils'
import { emit } from 'process'
import { onBeforeUpdate, onMounted, onUpdated } from 'vue'
import { ref } from 'vue'

import { ElTree, ElTreeSelect } from 'element-plus'
import TreeIcon from './TreeIcon.vue'
const emits = defineEmits<{
    'update:modelValue': [string, 'target' | 'catalog' | '']
}>()
const props = defineProps<{
    modelValue?: string
}>()

const selectValue = ref(null)

const treeSelectRef = useCompRef<typeof ElTree>(null)

const treeData = ref<ICatalogTree[]>([])

onMounted(() => {
    selectValue.value = props.modelValue || null

    apiList.catalogApi.queryTargetTree().then((res) => {
        if (isOK(res)) {
            treeData.value = res.result.children
        }
    })
})

const currentNode = ref<ICatalogTree>()

function handleChange(value: string) {
    const data = treeSelectRef.value.getCurrentNode() as ICatalogTree
    // console.log('change node', node)

    currentNode.value = { ...data }

    emits('update:modelValue', value, data.type)
}

onBeforeUpdate(() => {
    // if (props.modelValue) {
    //     selectValue.value = props.modelValue
    // }
})

function onClear() {
    currentNode.value = null
}
</script>

<style lang="scss" scoped></style>
